import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import * as ElIconModules from '@element-plus/icons-vue';
import '@/common/theme/style.element.scss';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import axios from '@/common/utils/http';
import { store, key } from '@/store/index';
import { storeStateType } from '@/common/types/store';
import ConditionView from '@/components/condition-view/index.vue';
import Pagination from '@/components/pagination/index.vue';
import ListView from '@/components/list-view/index.vue';
const app = createApp(App)

// 添加全局扩展
const _store = store as unknown as storeStateType;
app.config.globalProperties = {
  $axios: axios,
  branchId: _store.state.base.branchData.orgLevelId,
  brandId: _store.state.base.brandData.orgLevelId,
  branchType: _store.state.base.branchData.orgLevelType
}

// 导入饿了么框架
app.use(ElementPlus, {
  locale: zhCn,
  size: 'default'
})

// 导入图标 
for (let iconName in ElIconModules) {
  // 存在警告的图标名称
  const warningName = ['filter','link','menu','picture','select','switch','view'];
  let newName = iconName.replace(/[A-Z]/g, (key, index) => {
    return index === 0 ? key : '-' + key
  }).toLocaleLowerCase();
  if(warningName.includes(newName)) {
    newName = iconName
  }
  app.component(newName, ElIconModules[iconName])
}

// 全局注册组件
app.component('ConditionView', ConditionView);
app.component('Pagination', Pagination);
app.component('ListView', ListView);

// 导入路由
app.use(router);

// 导入vuex
app.use(store, key);

// 绑定模板
app.mount('#app');

// 设置页面标题
document.title = import.meta.env.VITE_APP_TITLE as string;

// 切换标签页更新缓存数据
document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    store.commit('updateComponyData');
  }
})
